<style lang="less">
  .vehicle-location{
    flex-direction: column;
    display: flex;
    .ve-bmap{
      flex: 1;
    }
    .el-button--black,.bg-purple-dark{
      background-color: #1F2D3D;
      border-color: #1F2D3D;
      color: white;
    }
    .el-radio-button__inner {
      background: #1F2D3D;
      color: white;
    }
    .el-button--black:hover, .el-button--black:focus {
      background: #1D8CE0;
      border-color: #1D8CE0;
      color: #fff;
    }
  }
</style>

<template>
  <div class="vehicle-location">
    <vehicle-map @map="map" ref="vehicleMap">
    </vehicle-map>
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-dark">
        <el-radio-group v-model="vehicleStatus" >
          <el-radio-button label="">全部车辆</el-radio-button>
          <el-radio-button label="GTMINUTE_locationUploadTime=-5">行驶</el-radio-button>
          <el-radio-button label="GTMINUTE_locationUploadTime=-30;LTMINUTE_locationUploadTime=-5">静止</el-radio-button>
          <el-radio-button label="LTMINUTE_locationUploadTime=-30">离线</el-radio-button>
        </el-radio-group>
        <el-input placeholder="请输入内容" v-model="condition_val" style="width: 300px;float: right;">
          <el-select slot="prepend" placeholder="请选择" style="width: 100px;" v-model="condition">
            <el-option label="车牌号" value="LIKE_plateNumber"></el-option>
            <el-option label="手机" value="LIKE_relations.driverInfo.phone"></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
      </div></el-col>
    </el-row>
    <el-table :data="tableData" highlight-current-row
              @current-change="handleCurrentChange"
              border v-loading="listLoading"  style="width: 100%;" height="200">
      <el-table-column prop="plateNumber" label="车牌号" width="120">
      </el-table-column>
      <el-table-column prop="status" label="状态" width="160">
        <template slot-scope="scope">
          <div v-if="scope.row.status=='go'">
             行驶中
          </div>
          <div v-else-if="scope.row.status=='static'">
            静止
          </div>
          <div v-if="scope.row.status=='off-line'">
            离线
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="location" label="当前位置">
      </el-table-column>
      <el-table-column label="司机" width="180">
        <template slot-scope="scope">
          {{ scope.row.driverInfos.map(item => item.name).join(',')}}
        </template>
      </el-table-column>
      <el-table-column label="手机号码" width="180">
        <template slot-scope="scope">
          {{ scope.row.driverInfos.map(item => item.phone).join(',')}}
        </template>
      </el-table-column>
      <el-table-column prop="organizationName" label="所属机构" width="180">
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      @size-change="handleSizeChange"
      @current-change="handlePageChange"
      layout="total,sizes,prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import VehicleMap from './VehicleMap.vue';
import {searchAllVehicleInfo, searchVehicleInfo} from '../../api/stowage/VehicleManage';
export default {
  components: {VehicleMap},
  data () {
    return {
      vehicleStatus: '',
      condition: 'LIKE_plateNumber',
      condition_val: '',
      type1: null,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      listLoading: false
    };
  },
  methods: {
    handleCurrentChange (val) {
      if (val) {
        this.$refs.vehicleMap.center(val.plateNumber, val.longitude, val.latitude);
      }
    },
    map () {
      let self = this;
      this.loadAllVehicles('', data => {
        this.$refs.vehicleMap.addMarks(data);
      });
      window.driverInterval = window.setInterval(function () {
        self.loadAllVehicles('', data => {
          self.$refs.vehicleMap.addMarks(data);
          self.search();
        });
      }, 60000);
    },
    search () {
      this.loadVehicles(this.vehicleStatus + ';' + this.condition + '=' + this.condition_val);
    },
    loadAllVehicles (filters = '', fn) {
      searchAllVehicleInfo({
        filters: 'ISNOTNULL_relations.driverInfo;' + filters,
        sorts: ''
      }).then(res => {
        if (res.data.successFlg) {
          fn(res.data.detailModelList);
        } else {
          this.$message.error(res.data.errorMsg);
        }
      });
    },
    loadVehicles (filters = '') {
      this.listLoading = true;
      searchVehicleInfo({
        filters: 'ISNOTNULL_relations.driverInfo;' + filters,
        size: this.pageSize,
        page: this.currentPage
      }).then(res => {
        if (res.data.successFlg) {
          this.tableData = res.data.detailModelList;
          this.total = res.data.totalCount;
          this.listLoading = false;
        }
      });
    },
    handleSizeChange (size) {
      this.pageSize = size;
      this.loadVehicles();
    },
    handlePageChange (page) {
      this.currentPage = page;
      this.loadVehicles();
    }
  },
  watch: {
    vehicleStatus () {
      this.search();
    }
  },
  mounted () {
    this.loadVehicles();
  }
};
</script>
